<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>卡通猫</title>
</head>
<body>
        <!-- xmlns:xlink的设置是为了与use标签的xlink:href配合 。必须添加该属性 复用才能实现 -->
    <svg width="140" height="170" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>卡通猫</title>
        <desc>一只猫的轮廓</desc>
        <!-- 猫脸 -->
        <circle cx="70" cy="95" r="50" style="stroke:tomato;fill:thistle;"></circle>
        <!-- 两只眼睛 -->
        <circle cx="55"  cy="80" r="5" style="stroke:black;fill:rgb(136, 118, 136);"></circle>
        <circle cx="85"  cy="80" r="5" style="stroke:black;fill:rgb(136, 118, 136);"></circle>
        <!-- 胡须 -->
        <g id="whiskers">
            <line x1="75" y1="95" x2="135" y2="85" style="stroke:black;"></line>
            <line x1="75" y1="95" x2="135" y2="105" style="stroke:black;"></line>
        </g>
        <!-- 复用胡须分组 scale(-1,1)将x轴坐标乘以-1，translate表示水平方向和竖直方向的移动值-->
        <!-- transform="scale(2)"表示将元素放大两倍 transform="scale(2,0.5)"表示宽度放大2倍高度压缩到一半 translate表示平移-->
        <use xlink:href="#whiskers" transform="scale(-1,1) translate(-140 0)"></use>
        <!-- 耳朵 画折线-->
        <polyline points="108 62,90 10,70 45,50 10,32 62" style="stroke:black;fill:none;"></polyline>
        <!-- 嘴巴 画折线 -->
        <polyline points="35 110,45 120,95 120,105 110" style="stroke:black;fill:none;"></polyline>
        <!-- 鼻子 路径  A起始点坐标、半径、方向、结束点坐标 7个参数-->
        <path d="M75 90 L65 90 A5 10 0 0 0 75 90" style="stroke:none;fill:rgb(145, 131, 131);"></path>
        <!-- 文本文字 -->
        <text x="60" y="165" style="font-family: '宋体';font-size:14px;stroke:black;">猫咪</text>
    </svg>
</body>
</html>